<template>
  <el-card>
    <el-row style="display: inline">
      {{ tittle.name[countDisabled.temp] }}
      <el-button
          :class="countDisabled.temp?'changeShow':'notShow'"
          @click="changPage"
      >返回</el-button>
    </el-row>

  </el-card>
  <el-card class="cardMain">
    <div v-if="countDisabled.temp===0">
      <el-input v-model="countNumber" class="countInput" placeholder="请输入优惠券兑换码"></el-input>
      <el-button @click="checkCountNumber" class="countButton">兑换</el-button>
      <div class="rightFloat">
        <el-button @click="countDisabled.temp=1" class="rightButton">
          <el-icon>
            <Ticket/>
          </el-icon>
          领券中心
        </el-button>
        <el-button @click="countDisabled.temp=2" class="rightButton">
          <el-icon>
            <Ticket/>
          </el-icon>
          历史优惠券
        </el-button>
      </div>
      <el-row class="countMiddle">* 优惠券仅用于线下课</el-row>
      <div class="countBottom">
        <p>暂无数据</p>
      </div>
    </div>
    <div v-else-if="countDisabled.temp===1">
      <el-row style="font-size: 14px;display:inline;padding: 20px 0;text-align: center;color: #bebfc2">
        <p>暂无数据</p>
      </el-row>
    </div>
    <div v-else-if="countDisabled.temp===2">
      <el-row style="font-size: 14px;display:inline;padding: 20px 0;text-align: center;color: #bebfc2">
        <p>暂无数据</p>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Ticket} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

//收集兑换码
const countNumber = ref('');
const tittle = ref({
  name: ['我的优惠券', '领券中心', '历史优惠券']
})


//用于页面内跳转展示（路由不变）
const countDisabled = ref({
  temp: 0,

});
const changPage = () => {
  countDisabled.value.temp = 0;
}
//拿数据发请求进行验证（未完成）？进行数据验证待定
const checkCountNumber = async () => {
  if (countNumber.value) {
    console.log(countNumber.value)
  } else {
    ElMessage.error("无效的兑换码")
  }
}
</script>

<style lang="less" scoped>
.changeShow {
  float: right
}

.notShow {
  display: none;
}

.cardMain {
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  padding: 30px;


  .countInput {
    width: 480px;
    height: 40px;
  }

  .countButton {
    color: #fff;
    background-color: #f93684;
    border-color: #f93684;
    width: 100px;
    height: 40px;
    margin-left: 11px;
  }

  .rightFloat {
    float: right;
    width: auto;
    padding: 7px 0;
  }

  .countMiddle {
    margin-top: 20px;
    font-size: 14px;
    color: #dba059;
  }

  .countBottom {
    padding: 0 30px;
    font-size: 14px;
    text-align: center;
    color: #909399;
  }
}
</style>
